<template>
  <div class="unit-setter">
    <div class="unit box-shadow">
      <span 
        class="unit-item" 
        :class="getUnitRate == item.rate ? 'active' : ''"
        v-for="(item, index) in unit" 
        :key="index"
        @click="setUnit(item.rate)"
      >
        {{item.context}}
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  data() {
    return {
      unit: [
        { 
          id: 1,
          context: '元',
          rate: 1
        },
        { 
          id: 2,
          context: '角',
          rate: 0.1
        },
        { 
          id: 3,
          context: '分',
          rate: 0.01
        },
        { 
          id: 4,
          context: '里',
          rate: 0.001
        }
      ],
    }
  },
  methods: {
    // 保存当前单位
    setUnit(rate) {
      this.setUnitRate(rate)
    },
    ...mapMutations('lottery', {
      setUnitRate: 'SET_UNIT_RATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getUnitRate', 'getUnitPrice'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .unit-setter 
    .unit
      display flex 
      height 35px
      align-items center
      margin-left 10px
      border-top-right-radius 3px
      border-bottom-right-radius 3px
      border-top-left-radius 3px
      border-bottom-left-radius 3px
      border-top 1px solid $color-divide-line 
      border-bottom 1px solid $color-divide-line 
      .unit-item
        font-size 14px
        width 35px
        line-height 35px
        text-align center
        border-right 1px solid $color-divide-line 
        cursor pointer
        box-sizing border-box
        &:first-child 
          border-top-left-radius 3px
          border-bottom-left-radius 3px
          border-left 1px solid $color-divide-line 
        &:last-child  
          border-top-right-radius 3px
          border-bottom-right-radius 3px
          border-right 1px solid $color-divide-line 
        &.active
          background linear-gradient(0deg,#b42020,#e02828)
          border 1px solid rgba(184, 33, 33, 1)
          box-shadow 0px 3px 5px 0px rgba(0, 0, 0, 0.1)
          color #fff
          box-sizing border-box
</style>
